<template>
	<view class="overall">
		<view class="set">
			<u-icon name="setting" color="#fff" size="25" style="margin-top: -5%;margin-left: -5%;"></u-icon>
		</view>
		<view class="avatar">
			<image src="../../static/img/user/avatar.jpg"></image>
		</view>
		<view style="text-align: center;color: #fff;">
			noname
		</view>
		<view class="gn1">
			<view class="orders">
				<image src="../../static/img/user/icon-order.png"></image>
				<label>全部订单</label>
				<u-icon name="arrow-right" style="padding-left: 65%;" color="black" size="18" @click="all"></u-icon>
			</view>
			<view class="orders2">
				<u-icon name="rmb-circle" color="black" size="40"></u-icon>
				<u-icon name="gift" color="black" size="40"></u-icon>
				<u-icon name="car" color="black" size="40"></u-icon>
				<u-icon name="chat" color="black" size="40"></u-icon>
				<u-icon name="grid" color="black" size="40"></u-icon>
			</view>
			<view class="orders3">
				<label>待付款</label>
				<label>待发货</label>
				<label>待收货</label>
				<label>待评价</label>
				<label style="margin-left: 9%;">全部</label>
			</view>
		</view>
		<view class="gn2">
			<view class="orders">
				<image src="../../static/img/user/icon-address.png"></image>
				<label>收货地址</label>
				<u-icon name="arrow-right" style="padding-left: 65%;" color="black" size="18"></u-icon>
			</view>
			<view class="orders">
				<image src="../../static/img/user/icon-kefu.png"></image>
				<label>客服中心</label>
				<u-icon name="arrow-right" style="padding-left: 65%;" color="black" size="18"></u-icon>
			</view>
			<view class="orders">
				<image src="../../static/img/user/icon-collect.png"></image>
				<label>我的收藏</label>
				<u-icon name="arrow-right" style="padding-left: 65%;" color="black" size="18"></u-icon>
			</view>
			<view class="orders">
				<image src="../../static/img/user/icon-about.png"></image>
				<label>帮助中心</label>
				<u-icon name="arrow-right" style="padding-left: 65%;" color="black" size="18"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			all() {
				uni.navigateTo({
					url: '/pages/Allorder/Allorder'
				})
			}
		}
	}
</script>

<style>
	.overall {
		background-color: #dfdfdf;
		height: 1600rpx;
		width: 100%;
	}

	.set {
		padding-left: 60rpx;
		padding-top: 60rpx;
	}

	.avatar image {
		width: 160rpx;
		height: 160rpx;
		border-radius: 80rpx;
	}

	.avatar {
		text-align: center;
	}

	.gn1 {
		background-color: white;
		width: 97%;
		height: 250rpx;
		border-radius: 20rpx;
		margin: 0 auto;
	}

	.orders image {
		width: 50rpx;
		height: 50rpx;
	}

	.orders {
		display: flex;
		padding-top: 16rpx;
		padding-left: 15rpx;
		padding-bottom: 16rpx;
		border-bottom: 1px solid #dfdfdf;
	}

	.orders label {
		padding-left: 25rpx;
	}

	.orders2 {
		display: flex;
		padding-left: 40rpx;
		padding-top: 30rpx;
	}

	.orders2 .u-icon {
		width: 20%;
	}

	.orders3 {}

	.orders3 label {
		margin-left: 46rpx;
	}

	.gn2 {
		background-color: white;
		width: 97%;
		height: 330rpx;
		border-radius: 20rpx;
		margin: 0 auto;
		margin-top: 20rpx;
	}
</style>